import React, { useState, useEffect, useContext, createContext } from 'react'

// 当组件嵌套太多的时候明显的感觉到组件之间的传值麻烦
// 发现传值在组合里边,上下文空间,
// 既然传值,所以需要创建空间,是一个对象
const numcontext = createContext()
// provider 提供者 consumer 消费者
console.log(numcontext)


function Son(props) {
    const back =  useContext(numcontext)
    /* const {msg,setMsg} =  useContext(numcontext) */
    console.log(back)

    return (
         <h3>我是儿子组件---{back.msg}</h3>
    )
}

function Father(props) {
    const { fval } = props
    return <Son  >我是父级组件 </Son>
}
export default function Context00(props) {
    let [msg,setMsg] = useState('顶级')
    return (
        <div>
            <numcontext.Provider value={{msg,setMsg}}>
                我是顶级的组件
                <Father   ></Father>
            </numcontext.Provider>

        </div>
    )
}

